import { Form, ProCard } from 'szcd';
import { type ICardView } from '../../cards/base';
import { useSnapshot } from 'valtio';

export interface ITabView {
  title: string;
  labelWidth: number | string;
  cards: Array<
    ICardView & {
      component: React.FC<{ service: ICardView } & React.HTMLAttributes<HTMLDivElement>>;
    }
  >;
}

const Tab: React.FC<{ service: ITabView } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service);
  return (
    <ProCard ghost style={{ padding: '16px 0' }} {...restProps}>
      <Form labelCol={{ flex: snap.labelWidth }}>
        {snap.cards && service.cards.map((card, key) => (
          <card.component key={key} service={card} />
        ))}
      </Form>
    </ProCard>
  );
};

export default Tab;
